<template>
    <div class="common-layout" style="height: 4000px;">
      <el-container style="height: 100vh;">
        <!-- 产品详细 -->
        <el-header style="height: auto; padding: 20px;  background-color:aqua;">
          <el-container >
            <!-- 左图片 -->
            <el-aside width="200px">
              <div class="block">
                <el-image :src="url" style="width: 150px; height: 150px" />
              </div>
            </el-aside>
            <el-main style="height: auto; overflow: visible;">
              <!-- 右详细信息 -->
              <p1 style="font-size: 30px;">{{ prosto.shopName }}</p1><br />
              <div style="margin-top: 10px; font-size: 20px;">
                生产批次:<p1>{{ prosto.batch }}</p1>
                <p1 style="margin-left: 200px;"> 保质期:{{ prosto.periodTime }} 天</p1>
              </div>
              <div style="margin-top: 30px; font-size: 20px;">
                生产许可证号:<p1>{{ prosto.license }}</p1>
                <p1 style="margin-left: 87px;"> 生产企业:{{ prosto.manuName }} </p1>
              </div>
              <div style="margin-top: 30px;">
  <!-- 标题 -->
  <div style="font-size: 20px; margin-bottom: 15px;">
    <p1>产品检验报告</p1>
  </div>
  
  <!-- 图片容器 -->
  <div style="display: flex; align-items: flex-start; gap: 25px;">
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 102, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>
</div>
              
            </el-main>
          </el-container>
        </el-header >
        <!-- 隔断层 -->
        <div class="module-divider">
          <p style="height: 30px;"> </p>
        </div>
<div>
       <!-- 养殖一条龙信息 -->
       <el-main  style="background: #e6f7ff; padding: 0;">
          <el-container style="height: auto; padding: 20px;  background-color:aqua;">
            <!-- 顶部导航菜单 -->
      <el-header style="height: auto; overflow: visible;">
        
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    style="padding: 20px;  width: 100%; box-sizing: border-box;"
    active-text-color="#ffd04b"
    @select="handleSelect"
    router
  >
  <el-menu-item index="BreedView"  :route="{ path: '/BreedView',query: { batch: route.query.batch }}" style="font-size: 20px; height: auto;overflow: visible; ">养殖信息({{poiuyt}}/5)</el-menu-item>
    <el-menu-item index="Slaughter" :route="{ path: '/Slaughter',query: { batch: route.query.batch }}" style="font-size: 20px;">屠宰信息({{poiuyt2}}/4)</el-menu-item>
    <el-menu-item index="Processing" :route="{ path: '/Processing',query: { batch: route.query.batch }}" style="font-size: 20px;">深加工信息({{poiuyt3}}/8)</el-menu-item>
  </el-menu>

      </el-header>
  <!-- 修改养殖信息容器结构 -->

<div class="content-wrapper">
  <el-main style="display: flex; flex-direction: column; height: calc(100vh - 380px); margin-top: 15px; height: auto;">
  <div>
    <el-scrollbar :wrap-style="{ overflowX: 'hidden' }" :view-style="{ minHeight: '680px' }">    
      <RouterView 
     />
      </el-scrollbar>
      </div>
</el-main>
</div>
    </el-container>
        </el-main>
</div>
      </el-container>
    </div>
  </template>
  
  <script lang="ts" setup>
  import type { ImageProps } from 'element-plus';
  import { ref, reactive, onMounted } from 'vue';
  import axios from 'axios';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useCounterStore } from '@/stores/counter';
  import { useRouter, useRoute } from 'vue-router';
  import type { UploadProps, UploadUserFile } from 'element-plus';
  
  let route = useRoute();
  
  const url = ref('');
  const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
  onMounted(() => {
    selePic();
    selePic2();
    getlistpro();
    getbreedAll();
    getSlaAll();
    getSupAll();
  });

const poiuyt=ref([]);
//查询养殖模块信息完成度
  const getbreedAll=()=>{
    axios({
      url:'http://localhost:5011/api/Product/QueryBreedAll',
      method:'get',
      params:{
        ProId:route.query.proId,
        Batch:route.query.batch     
       }
    }).then(res=>{
      if(res.data.code==101){
        poiuyt.value=res.data.data
        console.log('养殖信息完成度',poiuyt.value)
      }
    })
  }


  const poiuyt2=ref([]);
//查询屠宰模块信息完成度
  const getSlaAll=()=>{
    axios({
      url:'http://localhost:5011/api/Product/QuerySlaAll',
      method:'get',
      params:{
        ProId:route.query.proId,
        Batch:route.query.batch      }
    }).then(res=>{
      if(res.data.code==101){
        poiuyt2.value=res.data.data
        console.log('屠宰信息完成度',poiuyt2.value)
      }
    })
  }

  const poiuyt3=ref([]);
//查询深加工模块信息完成度
  const getSupAll=()=>{
    axios({
      url:'http://localhost:5011/api/Product/QuerySupAll',
      method:'get',
      params:{
        ProId:route.query.proId,
        Batch:route.query.batch
      }
    }).then(res=>{
      if(res.data.code==101){
        poiuyt3.value=res.data.data
        console.log('屠宰信息完成度',poiuyt2.value)
      }
    })
  }

  
  const fileList = ref<UploadUserFile[]>([]);

  // 查询产品数据
  const page = reactive({
    ProId:route.query.proId,
    Pageindex: 1,
    Pagesize: 2
  });
  
  // 接收数据
  const prosto = reactive({
    proId: 0,
    shopName: '',
    batch: '',
    periodTime: '',
    manuName: '',
    license: ''
  });
  
  // 查询产品方法
  const getlistpro = () => {
    axios({
      url: 'http://localhost:5011/api/Product/QueryProductID',
      method: 'get',
      params: page
    })
   .then(res => {
      if (res.data.code == 101) {
        console.log('chaanpinxiangq ',res.data.list);
        prosto.proId = res.data.list[0].proId;
        prosto.batch = res.data.list[0].batch;
        prosto.shopName = res.data.list[0].shopName;
        prosto.periodTime = res.data.list[0].periodTime;
        prosto.manuName = res.data.list[0].manuName;
        prosto.license = res.data.list[0].license;
      }
    });
  };
  
  // 查询图片
  const syoo = reactive({
    PicType: 101,
    Batch: route.query.batch
  });
  const picra = reactive({
    picaddr: ''
  });
  
  // 查询图片封面页
  const selePic = () => {
    axios({
      url: 'http://localhost:5013/api/Pic/QueryPic',
      method: 'get',
      params: {
        PicType: syoo.PicType,
        Batch: syoo.Batch
      }
    })
   .then(res => {
      console.log(syoo.PicType);
      console.log(syoo.Batch);
      if (res.data.code == 101) {
        console.log(res);
        url.value = res.data.list[0].pictureAddr;
        console.log(picra.picaddr);
      }
    });
  };
  // 查询图片产品检验报告
  const selePic2 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 102, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};
  



  // 上传图片
  
  const dialogImageUrl2 = ref('');

  const dialogImageUrl = ref('');
  const dialogVisible = ref(false);
  
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    deletepic(uploadFile.name)
    console.log(uploadFile, uploadFiles);
  };
  
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
  };
  //删除图片
const deletepic=(pictrueId:any)=>{
  axios({
    url:'http://localhost:5013/api/Pic/DeletePic',
    method:'put',
    data:{
      pictureId:pictrueId
    }
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage.success("操作成功");
      getSlaAll();
    }
  })
}
  </script>
  
  <style scoped>
  .common-layout {
    height: 100vh;
    overflow: hidden; /* 防止出现滚动条 */
  }
  
  .demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
  }
  
  .demo-image .block:last-child {
    border-right: none;
  }
  
  .demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  /* 全局滚动条隐藏 */
.el-scrollbar__bar.is-vertical {
  width: 0 !important;
  opacity: 0 !important;
}

.info-content-container {
  background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
}

/* 保持与图像中相同的字体样式 */
.info-content-container p {
  font-family: 'Microsoft YaHei';
  color: #333;
  line-height: 1.6;
}



  </style>